<!-- 柱状图 -->
<template>
	<div class="wrap">
    <!-- <span class="title">top <span>10 </span> 最近加速流量排名 (单位:KB)</span> -->
		<div ref="barchart" id="chart1" :style="{height:height,width:width}"></div>
	</div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      width: "100%",
      height: "350px",
      dataList: [],
    };
  },
	props: {
		title: {
      type: String,
      default: '显示日统计趋势'
    },
    // width: {
    //   type: String,
    //   default: '100%'
    // },
    // height: {
    //   type: String,
    //   default: '350px'
    // },
    chartData: {
      type: Object,
      required: true
    }
  },
	watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
		this.myChart = this.$echarts.init(this.$refs.barchart, 'macarons')
		this.getData()
  },
	methods: {
    async getData() {
      if (this.chartData) {
        this.$nextTick(()=>{
          this.setOptions(this.chartData)
        })
      }
      else{
        this.$nextTick(()=>{
          const dom = document.getElementById('chart1');
          dom.innerHTML = '<div class="el-table__empty-block"><span class="el-table__empty-text">暂无数据</span></div>';
          dom.removeAttribute('_echarts_instance_');
        })
      }
    },
		setOptions(chartData){
			let colorList = [
				'#63ace5',
				'#f9dc5c',
				'#b8e994',
				'#ff7272',
				'#ffa931',
				'#85a392',
				'#9174d7',
				'#f78fb3',
				'#cc8e35',
				'#f19066'
			];
			let seriesData = chartData.series.map((item, index) => {
				return {
					value: item,
					itemStyle: {
						// color: colorList[index % colorList.length]
						color: '#5f91a8'
					}
				};
			});
			this.myChart.setOption({
				xAxis: {
					type: 'value',
				},
				yAxis: {
					type: 'category',
					inverse: true,//倒叙
					data: chartData.xAxis,
					axisLabel:{
						show:true,
						formatter:function(value){
							var texts=value;
							if(texts.length > 15){ // 具体多少字就看自己了
									texts = texts.substr(0,15) + '...';
							}
							return texts;
						}
					}
				},
				tooltip: {
          trigger: "item",
					backgroundColor: '#fff',
					formatter: function name(params) {
            return `${params.name}： ${params.value}`
          },
        },
				series: [
					{
						data: seriesData,
						type: 'bar',
						barWidth : 25,
						itemStyle: {
							normal: {
								label: {
									show: true, //开启显示
									position: 'right', //在上方显示
									textStyle: { //数值样式
										color: '#5f91a8',
										fontSize: 14
									}
								}
							}
						},
					}
				],
				grid:{
					top: 15,//拉伸距离顶部高度
					bottom: 0,//拉伸距离底部高度
					left: 100,// 调整这个属性
				},
				color: colorList
			})
			this.myChart.on('mouseover',function(e){
					const component = e.componentType;
					const value = e.value;
					const offsetX = e.event.offsetX;
					const offsetY = e.event.offsetY;
					if(component === 'yAxis'){
						$('#chart1').find('.echarts_tip').remove();
						$('#chart1').append(`
							<div class="echarts_tip" style="top:${offsetY}px;left:${offsetX}px;">
								${value}
							</div>
						`)
					}   
			})
      this.myChart.off('click');
			this.myChart.on("click", (params) => {
        this.$emit("pieclick", params.name, this.title);
      });
		}
	}
};
</script>
<style scoped>

.echarts_tip{
	position:absolute;
	border-radius:5px;
	background:rgba(0,0,0,.5);
	color:#FFF;
	padding:10px 20px;
}
.wrap {
  height: 370px;
  overflow: hidden;
}
</style>